<template>
  <div class="accounts-view personal-center">
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="menu">
          <div>
            <h2>收藏夹
              <el-button icon="el-icon-plus" style="float: right;" type="text" @click="dialogVisible = true"></el-button>
            </h2>
            <el-dialog
              title="新建收藏夹"
              :visible.sync="dialogVisible"
              width="30%"
            >
              <el-input
                type="textarea"
                autosize
                placeholder="请输入文件夹名称"
                v-model="textarea1">
              </el-input>
              <span slot="footer" class="dialog-footer">
             <el-button @click="dialogVisible = false">取 消</el-button>
             <el-button type="primary" @click="newCollect">确 定</el-button>
              </span>
            </el-dialog>
          </div>
          <div class="menu-item" v-for="favorite in myfolder">
            <a @click="change_cur_collect(favorite.favoriteid)">{{ favorite.favoritename }}</a>
            <a v-if="favorite.favoritename !== '默认收藏夹'" style="float: right;"  class="el-icon-delete"
                       @click="del_collect(favorite.favoriteid)" ></a>
          </div>
        </div>
      </el-col>
      <el-col :span="18">
        <h1>{{ curfavorite.favoritename }} <el-button  icon="el-icon-edit" type="text" @click="dialogVisible1 = true"></el-button></h1>
        <el-dialog
          title="修改收藏夹"
          :visible.sync="dialogVisible1"
          width="30%"
        >
          <el-input
            type="textarea"
            autosize
            placeholder="请输入文件夹名称"
            v-model="textarea2">
          </el-input>
          <span slot="footer" class="dialog-footer">
             <el-button @click="dialogVisible1 = false">取 消</el-button>
             <el-button type="primary" @click="updateCollect">确 定</el-button>
              </span>
        </el-dialog>
        <hr>
        <div class="movies-result">
          <div class="border-movie" v-for="movie in movies">
            <div class="single-movie" >
              <img width="100%" height="85%" :src="movie.localimg" @mouseenter="change_movieclass(movie)"
                   @mouseleave="re_movieclass()" @click="goToMovie(movie.movieid)">
              <div class="movie-title">
                <label @click="goToMovie(movie.movieid)">{{ movie.name.substring(0, 15) }}<span> {{ movie.score }}</span></label>
                <el-button type="text" icon="el-icon-delete"  @click="delCollectMovie(movie.movieid)"></el-button>
              </div>
            </div>
            <div v-if="current_movie === movie" class="movie_context_active">
              <div class="movie_context">
                <label>{{ movie.name }}<span> {{ movie.year }}</span></label>
                <div class="movie_rate">
                  <el-rate :max=5 v-model="movie.score" disabled show-text text-color="#ff9900">
                  </el-rate>
                </div>
                <div class="movie_type">
                  <label>{{ movie.minus }}分钟&nbsp;&nbsp;&nbsp;&nbsp;<label>{{ movie.region }}</label></label>
                </div>
                <div class="movie_members">
                  <label>导演&nbsp;&nbsp;&nbsp;&nbsp;{{ movie.director }}</label><br>
                  <label>演员&nbsp;&nbsp;&nbsp;&nbsp;{{ movie.actors }}</label>
                </div>
              </div>
              <div class="movie_comment">
                {{ movie.storyline.substring(0, 40) }}..
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import movieApi from '../api/movieApi'

export default {
  name: 'my-collect',
  beforeCreate () {
    // 如果没有登录，跳转到登录页面
    if (!this.$store.state.user.login) {
      this.$router.replace('/login')
    }
  },
  created () {
    var _this = this
    _this.userid = _this.$store.state.user.user.userid
    if (!this.$store.state.user.login) {
      this.$router.replace('/login')
    } else {
      _this.getCollect()
    }
  },
  data () {
    return {
      myfolder: [],
      movies: [],
      curfavorite: '',
      current_movie: '',
      dialogVisible: false,
      textarea1: '',
      textarea2: '',
      dialogVisible1: false,
      userid: ''
    }
  },
  methods: {
    getCollect () {
      var _this = this
      movieApi.getCollect(this.$store.state.user.user.userid)
        .then(function (res) {
          _this.myfolder = res.data['favorites']
          _this.curfavorite = res.data['first']
          _this.movies = res.data['movies']
        })
    },
    change_movieclass: function (arg) {
      this.current_movie = arg
    },
    re_movieclass: function () {
      this.current_movie = ''
    },
    goToMovie: function (id) {
      this.$router.push('/movie/' + id)
    },
    change_cur_collect (favoriteid) {
      var _this = this
      movieApi.getFavoriteMovies(favoriteid)
        .then(function (res) {
          _this.curfavorite = res.data['favorite']
          _this.movies = res.data['movies']
        })
    },
    del_collect (favoriteid) {
      var _this = this
      movieApi.delCollet(favoriteid)
        .then(function (res) {
          _this.getCollect()
          _this.$message({
            message: '删除成功！',
            type: 'success'
          })
        })
    },
    newCollect () {
      if (this.textarea1 === '') {
        this.$message({
          message: '请输入收藏夹名字！',
          type: 'warning'
        })
      } else {
        var _this = this
        movieApi.newCollect(_this.$store.state.user.user.userid, _this.textarea1)
          .then(function (res) {
            var favoriteid = res.data['favoriteid']
            var favorite = {
              'favoriteid': favoriteid,
              'favoritename': _this.textarea1
            }
            _this.myfolder.push(favorite)
            _this.dialogVisible = false
            _this.$message({
              message: '创建成功！',
              type: 'success'
            })
          })
      }
    },
    updateCollect () {
      if (this.textarea2 === '') {
        this.$message({
          message: '请输入收藏夹名字！',
          type: 'warning'
        })
      } else {
        var _this = this
        _this.curfavorite.favoritename = _this.textarea2
        movieApi.updateCollect(_this.curfavorite.favoriteid, _this.textarea2)
          .then(function (res) {
            _this.$message({
              message: '修改成功！',
              type: 'success'
            })
            _this.dialogVisible1 = false
            _this.getCollect()
          })
      }
    },
    delCollectMovie (movieid) {
      var _this = this
      movieApi.delColletMovie(_this.curfavorite.favoriteid, movieid)
        .then(function (res) {
          _this.getCollect()
          _this.$message({
            message: '删除成功！',
            type: 'success'
          })
        })
    }
  }
}
</script>
<style lang="stylus" scoped>
h2
  color: #22AA3E;

h1
  font-size: 25px;
  font-weight: bold;
  color: #494949;
  line-height: 1.1;

a
  color: #0085DD;

.section-same
  width: 1000px;
  float: left;
  margin-left: 10%;
  margin-right: 10%;

#header
  width: 1000px;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 20px;

#cover
  .nbgnbg
    img
      width: 70%;

#header-left
  float: left;
  width: 400px;

#header-right
  padding-top: 50px;
  margin-left: 600px;
  width: 500px;

#comment-btn
  width: 80px;
  color: #ca6445;
  background: #fae9da;

#rating-btn
  margin-left: 50%;
  width: 80px;
  color: #ca6445;
  background: #fae9da;

.comment-author
  color: #0085DD;

#synopsis-content
  width: 1000px;

#photo
  ul
    float: left;

    li
      float: left;

      img
        height: 100px;

#also-like-movie-content
  float: left;

  dl
    float: left;

    img
      height: 250px;

#ratingPlace
  float: left;

#ratingLeft
  float: left;

#ratingRight
  float: left;

#commentSubmit
  float: right;

#commentCancle
  float: left;

.alsoLikeID
  margin: 10px 10px 10px 10px

.find-view
  margin-top 20px
  width 1400px
  height auto
  overflow hidden

@media screen and (min-width: 1201px) {
  .find-view {
    width: 1400px
  }
}

@media screen and (max-width: 1200px) {
  .find-view {
    width: 900px
  }
}

@media screen and (max-width: 900px) {
  .find-view {
    width: 200px;
  }
}

@media screen and (max-width: 500px) {
  .find-view {
    width: 100px;
  }
}

.find-view .movies-result
  width 1200px
  height 700px
  margin-top 10px
  margin-left 70px

@media screen and (min-width: 1201px) {
  .find-view .movies-result {
    width: 1100px
  }
}

@media screen and (max-width: 1200px) {
  .find-view .movies-result {
    width: 900px
  }
}

@media screen and (max-width: 900px) {
  .find-view .movies-result {
    width: 200px;
  }
}

@media screen and (max-width: 500px) {
  .find-view .movies-result {
    width: 100px;
  }
}

.border-movie
  width 20%
  height 45%
  float left

.single-movie
  height 100%
  width 75%
  margin-top 10%
  margin-left 2%

.single-movie:hover
  cursor pointer

.movie_context_active
  border 1px solid #C0C0C0
  background rgb(255, 255, 255)
  height 400px
  width 300px
  margin-top -315px
  margin-left 80%
  float left
  position relative
  z-index 1999
  display block

.movie_context
  width 100%
  height 80%
  text-align left
  font-size 16px
  color #4682B4
  padding 10px 10px 10px 20px
  border-bottom 1px solid #DCDCDC

.movie_context label span
  color #7B7B7B
  font-size 12px

.movie_context .movie_rate
  margin-top 5px

.movie_context .movie_type
  margin-top 10px
  color #4F4F4F
  font-size 14px

.movie_context .movie_members
  margin-top 15px
  color #4F4F4F
  font-size 14px

.movie_context .movie_members label
  padding-bottom 10px

.movie_comment
  width 100%
  height 20%
  background #F5F5F5
  padding 10px 10px 10px 10px

.movie-title
  text-align center
  padding 0px
  font-size 12px
  margin-bottom 10px

.movie-title span
  color #FFA042

h2
  text-align center

.index-movies
  margin 20px auto
  height 300px

.button_index
  height 150px
  padding 0px
  margin 20px 60px 30px 60px

@media screen and (min-width: 1201px) {
  .button_index {
    width: 1100px
  }
}

@media screen and (max-width: 1200px) {
  .button_index {
    width: 900px
  }
}

@media screen and (max-width: 900px) {
  .button_index {
    width: 200px;
  }
}

@media screen and (max-width: 500px) {
  .button_index {
    width: 100px;
  }
}

.demo-flat-button
  margin 12px

.select_index
  border-top 1px solid #BEBEBE
  height 80px

@media screen and (min-width: 1201px) {
  .select_index {
    width: 1100px
  }
}

@media screen and (max-width: 1200px) {
  .select_index {
    width: 900px
  }
}

@media screen and (max-width: 900px) {
  .select_index {
    width: 200px;
  }
}

@media screen and (max-width: 500px) {
  .select_index {
    width: 100px;
  }
}

.demo-flat-button
  margin: 6px

.select_title
  width 140px
  margin 20px
  float left
  padding 5px

.select_title label
  font-size 18px
  margin-left 50px

.select_input
  width 200px
  margin 20px 0px 20px 30px
  float left

.load-more-button
  width 100%
  margin 20px 0px 20px 0px
</style>
